<template>
  <div class="familyTextList">
    <div class="content">
      <div class="headerBgc" :style="{ background: `url(${imgbgc})`, 'background-size': '100% 100%' }">
        <!-- <div class="name">{{itemname}}</div>
        <div class="title">家庭或团体关系测验</div>
        <div class="typeBox">
          <span>测试日期：</span>
          <el-date-picker
            v-model="testTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div> -->
      </div>
      <div class="questionBox">
        <div class="title">赛克-团体关系测验（{{personType == 'adult'?'成人版':'儿童版'}}）
          <div class="demo-image__preview">
            <el-image 
              style="width: 100px; height: 100px"
              :src="url" 
              :preview-src-list="srcList">
            </el-image>
          </div>
        </div>
        <div class="tipInfo">
          <div class="typeBox">
            <span>测评时间：</span>
            <el-date-picker
              v-model="testTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <div class="typeBox">
            <span>姓名：</span>
            <span>{{name}}</span>
          </div>
          <div class="typeBox">
            <span>关系：</span>
            <span>{{itemname}}</span>
          </div>
        </div>
        <!-- 2023.2题库 -->
        <!-- <div v-for="(item,index) in questionArr" :key="index" class="itemBox">
          <div class="selectItem" v-show="item.type == 'select'">
            <p>{{index + 1}}. {{item.questName}}</p>
            <span>被测人员选择了：</span>
            <el-select v-model="item.side" filterable placeholder="请选择">
              <el-option
                v-for="row in item.extra1"
                :key="row"
                :label="'序号' + row"
                :value="row">
              </el-option>
            </el-select>
          </div>
          <div class="inputItem" v-show="item.type == 'input'">
            <p>{{index + 1}}. {{item.questName}}</p>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="item.side">
            </el-input>
          </div>
        </div> -->
        <!-- 2023.10题库 -->
        <div v-for="(item,index) in newQuestion" :key="index" class="itemBox">
          <div class="selectItem" v-show="item.type == 'select'">
            <div style="display: inline-block;" v-for="(it,k) in item.question" :key="'aa' + k">
              <p :style="{ paddingLeft: k==0?'0px':'20px' }">
                <span v-show="k==0">{{index + 1}}. </span> {{it.questName}}
              </p>
              <el-select v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'&&it.isUseMap==false">
                <el-option
                  v-for="row in it.extra1"
                  :key="row"
                  :label="k==0?('卡片' + row):(item.question[0].side + '-' + row)"
                  :value="row">
                </el-option>
              </el-select>
              <el-select v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'&&it.isUseMap==true">
                <el-option
                  v-for="row in imgMap[item.question[0].side+0].map"
                  :key="row"
                  :label="item.question[0].side + '-' + row"
                  :value="row">
                </el-option>
              </el-select>
              <div style="display: inline-block;" v-if="it.sideType=='Array'">
                <el-select v-model="it.side[0]" filterable placeholder="请选择">
                  <el-option
                    v-for="row in it.extra1"
                    :key="row"
                    :label="'卡片' + row"
                    :value="row">
                  </el-option>
                </el-select>
                <span> —— </span>
                <el-select v-model="it.side[1]" filterable placeholder="请选择">
                  <el-option
                    v-for="row in it.extra1"
                    :key="row"
                    :label="'卡片' + row"
                    :value="row">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="inputItem" v-show="item.type == 'input'">
            <div v-for="(it,k) in item.question" :key="'bb' + k">
              <p><span v-show="k==0">{{index + 1}}. </span> {{it.questName}}</p>
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="it.side">
              </el-input>
            </div>
          </div>
          <div class="radioItem" v-show="item.type == 'radio'">
            <p>{{index + 1}}. <span v-show="item.optional=='1'" class="color666">(选填)</span> {{item.questName}}</p>
            <div class="radio_box">
              <table style="width: 100%;">
                <thead>
                  <tr>
                    <th></th>
                    <th v-for="(row,idx) in item.sideArr" :key="'ccc' + idx">{{ row }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(it,k) in item.question" :key="'cc' + k">
                    <td>{{ it.questName }}</td>
                    <td style="text-align: center;" v-for="(row,idx) in item.sideArr" :key="'cccc' + idx">
                      <el-checkbox @change="changeFn($event,it,idx)" v-model="it.side[idx]"></el-checkbox>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="selectInputItem" v-show="item.type == 'selectInput'">
            <div v-for="(it,k) in item.question" :key="'dd' + k">
              <p v-show="k==0"><span>{{index + 1}}. </span> {{it.questName}}</p>
              <div v-if="it.ctype=='select'" style="display: inline-block;">
                <el-select v-model="it.side" filterable placeholder="请选择" v-if="it.sideType=='String'">
                  <el-option
                    v-for="row in it.extra1"
                    :key="row"
                    :label="'卡片' + row"
                    :value="row">
                  </el-option>
                </el-select>
              </div>
              <div v-if="it.ctype=='input'">
                <el-input
                  type="textarea"
                  :rows="4"
                  :placeholder="it.questName"
                  v-model="it.side">
                </el-input>
              </div>
            </div>
          </div>
          <div class="mulselectItem" v-show="item.type == 'mulselect'">
            <div v-for="(it,k) in item.question" :key="'ee' + k">
              <p>
                <span v-show="k==0">{{index + 1}}. </span>
                <span v-show="item.optional=='1'" class="color666">(选填)</span>
                <span>{{it.questName}}</span>
              </p>
              <div>
                <span v-for="(row,idx) in item.sideArr" :key="'eee' + idx" 
                style="display: inline-block;width: 20%;vertical-align: top;">
                  <el-checkbox v-model="it.side[idx]" :disabled='it.disabled&&it.side[idx]==false'
                  @change="mulselectItemFn($event,item.sideArr,it,idx)">{{ row }}</el-checkbox>
                  <el-input
                    v-show="row == '其他' && it.side[4]==true"
                    placeholder="请输入内容"
                    v-model="it.otherValue">
                  </el-input>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" size="large" v-show="type!='edit'" @click="nextFn">再测一个</el-button>
          <el-button type="primary" size="large" v-show="type!='edit'" @click="finishFn">完成</el-button>
          <el-button type="primary" size="large" v-show="type=='edit'" @click="saveFn">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { seckGetQuestions, seckAddAssessRecord, seckUpdateAssessRecord } from '@/api/home.js'
export default {
  data() {
    return {
      imgbgc: require('../assets/images/ptitle.png'),
      personType: 'adult',
      testTime: new Date(),
      itemname: '',
      questionArr: [
        // {
        //   questName: '请从下面图片中选出一张您和父亲相处模式最像的一张图片。',
        //   type: 'select',
        //   side: ''
        // },
        // {
        //   questName: '请问您为什么选择这张图片?',
        //   type: 'input',
        //   side: ''
        // },
        // {
        //   questName: '请问图片中哪个代表您？',
        //   type: 'input',
        //   side: ''
        // },
        // {
        //   questName: '请您描述一下图片中两人（团体）的关系怎么样？?',
        //   type: 'input',
        //   side: ''
        // },
        // {
        //   questName: '请您再选择一张与您当前关系相反的图片。',
        //   type: 'select',
        //   side: ''
        // },
        // {
        //   questName: '请问您觉得这两张图片主要有什么不同或差异？?',
        //   type: 'input',
        //   side: ''
        // }
      ],
      testType: '',
      whichQuestion: '2',
      type: '',
      recordId: '',
      WAIMS_TOKEN: '',
      newQuestion: [],
      name: sessionStorage.getItem('name'),
      url: require('../assets/images/family.jpg'),
      srcList: [
        require('../assets/images/family.jpg')
      ],
      imgMap: JSON.parse(JSON.stringify(this.$store.state.imgMapping4Family))
    }
  },
  mounted() {
    this.personType = sessionStorage.getItem('personType')
    if(localStorage.getItem('WAIMS_TOKEN') && localStorage.getItem('WAIMS_TOKEN') !== '') {
      this.WAIMS_TOKEN = localStorage.getItem('WAIMS_TOKEN')
      this.type = this.$route.query.type ? this.$route.query.type : ''
      this.recordId = this.$route.query.recordId ? this.$route.query.recordId : ''
      // this.questionArr = this.$route.query.questionArr ? JSON.parse(this.$route.query.questionArr) : []
      this.newQuestion = this.$route.query.questionArr ? JSON.parse(this.$route.query.questionArr) : []
      this.itemname = this.$route.query.itemname ? this.$route.query.itemname : ''
      this.testType = this.$route.query.testType ? this.$route.query.testType : ''
      this.testTime = this.$route.query.testTime ? this.$route.query.testTime : new Date()
      if(this.type !== 'edit') {
        // this.getquestFn()
        if(this.personType == 'adult') {
          this.newQuestion = JSON.parse(JSON.stringify(this.$store.state.familyText4p))
        } else {
          this.newQuestion = JSON.parse(JSON.stringify(this.$store.state.familyText))
        }
      }
    } else {
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    }
    if(this.personType == 'adult') {
      this.imgbgc = require('../assets/images/ptitle.png')
    } else {
      this.imgbgc = require('../assets/images/ctitle.png')
    }
  },
  methods: {
    mulselectItemFn($event,sideArr,it,idx) {
      if(sideArr[idx]=='无' && it.side[idx] == true) {
        for(let k in it.side) {
          it.side[k] = false
        }
        it.side[idx] = true
        it.disabled = true
      } else {
        it.disabled = false
      }
    },
    changeFn(e,it,idx) {
      for(let i in it.side) {
        it.side[i] = false
      }
      it.side[idx] = !it.side[idx]
    },
    formatDateTime (date) {
      var y = date.getFullYear();
      var M = date.getMonth() + 1;
      M = M < 10 ? ('0' + M) : M;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      var mm = date.getMinutes();
      mm = mm < 10 ? ('0' + mm) : mm;
      return y + '-' + M + '-' + d+' '+h+':'+mm;
      // return y + '-' + m + '-' + d
    },
    finishFn() {
      // if(this.testTime == null || this.testTime == '') {
      //   this.testTime = this.formatDateTime(new Date())
      // } else {
      //   this.testTime = this.formatDateTime(this.testTime)
      // }
      var query = {
        testedId: sessionStorage.getItem('testedId'),
        whichQuestion: this.whichQuestion, // 分测验名称 1: 双人关系测验 2: 家庭或团体测验 3: 社会情境测验
        extra2: this.itemname, // 分测验对象
        result: JSON.stringify(this.newQuestion),
        testTime: (this.testTime == null || this.testTime == '') ? new Date() : this.testTime // 测试时间
      }
      seckAddAssessRecord(query).then(res => {
        if(res.code === 200) {
          var temparr = this.testType.split(',')
          // 由小到大排序
          temparr = temparr.sort().filter(item=> item)
          if(temparr.length>0) {
            this.$router.push({
              path: temparr[0] === '1'?'/doubleText':(temparr[0] === '2'?'/familyText':'/societyTextList'),
              query: {
                testType: temparr.slice(1).join(',')
              }
            })
          } else {
            // 所有测验完毕，跳转到当前用户的测验列表
            this.$router.push({
              path: '/personList',
              query: {
                type: 'look'
              }
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    nextFn() {
      // if(this.testTime == null || this.testTime == '') {
      //   this.testTime = this.formatDateTime(new Date())
      // } else {
      //   this.testTime = this.formatDateTime(this.testTime)
      // }
      var query = {
        testedId: sessionStorage.getItem('testedId'),
        whichQuestion: this.whichQuestion, // 分测验名称 1: 双人关系测验 2: 家庭或团体测验 3: 社会情境测验
        extra2: this.itemname, // 分测验对象
        result: JSON.stringify(this.newQuestion),
        testTime: (this.testTime == null || this.testTime == '') ? new Date() : this.testTime // 测试时间
      }
      seckAddAssessRecord(query).then(res => {
        if(res.code === 200) {
          if(this.personType == 'adult') {
            this.newQuestion = JSON.parse(JSON.stringify(this.$store.state.familyText4p))
          } else {
            this.newQuestion = JSON.parse(JSON.stringify(this.$store.state.familyText))
          }
          this.$router.push({
          path: '/familyText',
          query: {
            testType: this.testType
          }
        })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    saveFn() {
      var query = {
        WAIMS_TOKEN: this.WAIMS_TOKEN,
        // testId: 10008,
        recordId: this.recordId,
        result: JSON.stringify(this.newQuestion),
        testTime: (this.testTime == null || this.testTime == '') ? new Date() : this.testTime // 测试时间
      }
      seckUpdateAssessRecord(query).then(res => {
        if(res.code === 200) {
          this.$router.push({
            path: '/personList',
            query: {
              type: 'look'
            }
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getquestFn() {
      var query = {
        group: '2', // 团队或者家庭关系
        itemName: this.itemname
      }
      seckGetQuestions(query).then(res => {
        if(res.code === 200) {
          this.questionArr = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.familyTextList {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  .content {
    position: relative;
  }
  .headerBgc {
    height: 140px;
    background: url(../assets/images/ptitle.png) no-repeat;
    background-size: cover 100%;
    // border-bottom-right-radius: 70px;
    // border-bottom-left-radius: 70px;
    color: #fff;
    // padding: 100px 0 0 300px;
    .name {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .typeBox {
      font-size: 30px;
    }
  }
  .questionBox {
    position: absolute;
    top: 140px;
    left: 50%;
    margin-left: -600px;
    .title {
      font-size: 30px;
      font-weight: 700;
      margin: 10px 0;
      color: #d07b59;
      text-align: center;
      border-bottom: 1px solid #d07b59;
      padding-bottom: 20px;
    }
    .tipInfo {
      display: flex;
      margin-bottom: 10px;
      border-bottom: 1px solid #d07b59;
      padding-bottom: 10px;
      >div {
        display: inline-block;
        width: 33%;
        >span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .itemBox {
      width: 1200px;
      padding-top: 10px;
      // background-color: #ffffff;
      // box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 20%);
      // border-radius: 40px;
      // width: 1000px;
      // margin-bottom: 30px;
      // padding: 40px 100px;
    }
    .selectItem, .inputItem, .radioItem, .selectInputItem, .mulselectItem {
      // margin-bottom: 20px;
      p {
        margin-bottom: 15px;
        display: inline-block;
      }
    }
    .selectItem {}
    .inputItem {}
    .radioItem {
      .radio_box {
        border: 1px solid #d07b59;
        border-radius: 4px;
        padding: 10px;
      }
    }
    .selectInputItem {}
    .mulselectItem {}
  }
  .color666 {
    color: #666;
  }
  .btn {
    margin-top: 20px;
    margin-left: 470px;
    margin-bottom: 40px;
  }
}
</style>

<style lang="scss">
.el-select-dropdown__item.selected {
  color: #d07b59;
}
.familyTextList {
  .el-select {
    width: 180px;
  }
  .el-button {
    background: #d07b59 !important;
    border: 1px solid #d07b59 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: none !important;
  }
  .el-textarea,.el-input{
    border: 1px solid #d07b59;
    border-radius: 4px;
  }
  .el-textarea__inner,.el-input__inner,.el-input__wrapper{
    border: none;
    box-shadow: none;
  }
  .el-textarea__inner:hover,.el-input__inner:hover,.el-select .el-input__wrapper.is-focus {
    box-shadow: none !important;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #d07b59;
    border-color: #d07b59;
  }
  .el-checkbox,.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333;
  }
  .el-checkbox__inner:hover {
    border-color: #d07b59;
  }
}
</style>